<template>
    <div class="scalable-pages">
        <main class="main">
            <div class="container">
                <div class="section1">
                    <div class="cover-img">
                        <img src="https://www.kdxwindowfilm.com/banners/static/ditu.png" alt="" />
                    </div>
                    <div class="content-inner">
                        <div class="title" v-animate-on-scroll="'fadeInUp'">联系我们
                            <div class="red" v-animate-on-scroll="'fadeInUp'"></div>
                        </div>

                        <div class="content" v-animate-on-scroll="'fadeInRight'">
                            <!-- 使用 v-html 渲染富文本内容 -->
                            <div class="flexsws">
                                <img src="https://www.kdxwindowfilm.com/banners/static/ico1.png" />
                                <div>地址: 江苏省张家港环保新材料产业园晨港路85号</div>
                            </div>
                            <div class="flexsws">
                                <img src="https://www.kdxwindowfilm.com/banners/static/ico2.png" />
                                <div>电话: 0512-80151666 0512-80151777</div>
                            </div>

                            <div class="flexsws">
                                <img src="https://www.kdxwindowfilm.com/banners/static/ico5.png" />
                                <div>客服电话: 400-100-2450</div>
                            </div>
                            <div class="flexsws">
                                <img src="https://www.kdxwindowfilm.com/banners/static/ico3.png" />
                                <div>邮箱: mkt@kdxfilm.com</div>
                            </div>
                            <div class="flexsws">
                                <img src="https://www.kdxwindowfilm.com/banners/static/ico4.png" />
                                <div>传真: 0512-80151777</div>
                            </div>
                            <div class="flexsws">
                                <img src="https://www.kdxwindowfilm.com/banners/static/ico6.png" />
                                <div>邮编: 215634</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";
import rate from "../components/rate.vue";
import { useConfigStore } from '@/store/config';
import { storeToRefs } from 'pinia';

export default {
    components: {
        Swiper,
        SwiperSlide,
        rate,
    },
    setup() {
        const configStore = useConfigStore();
        const { webConfig } = storeToRefs(configStore);

        return {
            webConfig
        };
    },
    data() {
        return {
        };
    },
};
</script>

<style lang="less" scoped>
.flexsws {
    overflow: hidden;
    margin-top: 10px;
    display: flex;
    justify-content: left;
    justify-items: center
}

.flexsws div {
    float: left;
    line-height: 50px
}

.flexsws img {
    float: left;
    margin-right: 20px;
    height: 25px !important;
    display: block;
    margin-top: 12px
}

.banners {
    width: 100%;
    display: black;
}

.swipers {
    width: 100%;
}

.main {
    background-color: white;
}

img {
    display: inline-block;
    vertical-align: bottom;
}

.container {
    margin: 0 auto;
}

.section1 {
    position: relative;
    display: flex;
    flex-direction: row;

    .cover {
        width: 40%;
    }

    .content-inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 4%;

        .title {
            font-size: 40px;
            font-weight: bold;
            color: #000;
            letter-spacing: 15px;
            line-height: 1.2;
            margin-left: 10%;
        }

        .red {
            width: 100px;
            height: 13px;
            background-color: #c5000a;
            margin: 20px 0;
            margin-top: 50px;
        }

        .content {
            margin-top: 20px;
            padding-left: 50px;
            padding-right: 30px;
            box-sizing: border-box;
            color: #222;
            font-size: min(21px, 1.8vw);

            // 富文本内容样式
            ::v-deep p {
                color: inherit;
                font-size: min(20px, 18px);
                line-height: 35px;
                text-indent: 2em;
                margin: 4px 0;
                padding: 0;
            }

            ::v-deep img {
                max-width: 100%;
                height: auto;
            }

            ::v-deep a {
                color: #c5000a;
                text-decoration: underline;
            }

            ::v-deep ul,
            ::v-deep ol {
                padding-left: 2em;
                margin: 10px 0;
            }

            ::v-deep li {
                line-height: 35px;
            }
        }
    }
}

.section2 {
    width: 100%;
    overflow: hidden;

    img {
        display: block;
    }
}

.section3 {
    background-image: url("https://www.kdxwindowfilm.com/banners/static/aboutus.jpg");
    background-position: right center;
    background-repeat: no-repeat;
    aspect-ratio: 1.47;
    position: relative;
    background-size: 100%;

    .img1 {
        position: absolute;
        top: 2%;
        right: 5%;
        width: 750px;
        display: block;
    }

    .content-inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 2%;

        .title {
            font-size: min(40px, 50px);
            font-weight: bold;
            color: #000;
            letter-spacing: 15px;
            line-height: 1.2;
            margin-left: 10%;
        }

        .red {
            width: 100px;
            height: 13px;
            background-color: #c5000a;
            margin: 20px 0;
            margin-top: 50px;
        }

        .img2-wrapper {
            margin-top: 5%;
            width: 100%;
            margin: 0 auto;
            margin-top: 120px;

            img {
                width: 100%;
            }
        }
    }
}
</style>